<template>
    <view>
		<!-- 顶部组件 -->
		<u-navbar :is-back="false" :background="searchBarBg" :border-bottom="false" id="nav-bar">
			<view class="top u-flex">
				<image src="../../../static/qqq.png" class="mini-logo"></image>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view class="lunbo">
			<u-swiper :list="list" mode="dot" indicator-pos="bottomRight" :effect3d="true" ></u-swiper>
		</view>
		<!-- 小鼓励 (折叠面板) -->
		<u-collapse class="arti">
			<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
				{{item.body}}
			</u-collapse-item>
		</u-collapse>
		<!-- 实在没什么写了，来一篇文章填充一下首页 (富文本编辑器) -->
			<view class="u-content">
				<u-parse :html="content"></u-parse>
			</view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
				list : [
					"/static/yogaimg/yoga1.png",
					"/static/yogaimg/yoga2.png",
					"/static/yogaimg/yoga3.png",
					"/static/yogaimg/yoga4.png",
					"/static/yogaimg/yoga5.png",
					"/static/yogaimg/yoga6.png",
					"/static/yogaimg/yoga7.png",
					"/static/yogaimg/yoga8.png"
				],
				itemList: [{
								head: "瑜伽不只是为了身材，也是为了更好的自己",
								body: "瑜伽不是为了人鱼线，马甲线，只为了和更好的自己说一声hello。",
								open: false,
							},{
								head: "瑜伽与呼吸",
								body: "瑜伽，由吸气开始，呼气完毕，这是一个历程，也是一个轮回。如生活般，顺从其美、随遇而安，如行云般，像流水般洒脱，才是人生应有的境界",
								open: false,
							},{
								head: "俯卧穿针式",
								body: "俯卧，双腿打开略大于髋部，左手从身体下方穿过往左侧延展，掌心朝上，右手举过头顶往前延展，额头贴地，保持3-5分钟，换边",
								open: true,
							}],
				content: `
					<text>新手入门必修课等更多，请报名体验</text>
					<img src="https://img0.baidu.com/it/u=3334064868,455848686&fm=26&fmt=auto&gp=0.jpg" />
				`
			}
	    },
		onShow() {
			
		},
		computed: {
			searchBarBg() {
				return {
					background: `url('${this.imgUrl}/e6855d30-a420-11ea-9e8b-05a3242b26f2.png') no-repeat top / 100% 100%`
				}
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.mini-logo {
		width: 72rpx;
		height: 62rpx;
		min-width: 72rpx;
		margin-left: 20rpx;
	}
	.lunbo{
		margin-top: 10rpx;
		width: 100%;
	}
	.arti{
		text-align: center;
	}
	.u-content {
		margin-top: 100rpx;
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		
		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}
</style>